﻿import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { setMsgContent } from '../actions';
import '../../common/common.css';
import './msgBox.css';

class MessageBox extends Component {
    static propTypes = {
        message: PropTypes.string.isRequired,
        setMsg: PropTypes.func.isRequired
    }
    render() {
        return (
            <div className='block'>
                <div className='block-title'>消息内容：</div>
                <div className='block-content-box msg-box'>
                    <textarea 
                        onChange={e => this.props.setMsg(e.target.value)}
                        value={this.props.message}
                    />
                </div>
            </div>
        )
    }
}

const mapState2Props = state => ({ message: state.send.msg ||'' });
const mapDispatch2Props = dispatch => ({
    setMsg: msg => dispatch(setMsgContent(msg))
});


export default connect(mapState2Props, mapDispatch2Props)(MessageBox);